import React, { useState } from 'react';
import { Table, Input } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Search } = Input;

const UpdateTable = () => {
  const [pageSize, setPageSize] = useState(10);
  const [searchText, setSearchText] = useState('');
  const navigate = useNavigate();
  const [originData, setOriginData] = useState([
    { key: '1', page: '1', pagename: '主页', time: '三分钟前', operater: '尚玉晨', area: '1', program: '1', pagegroup: '-' },
    { key: '2', page: '2003', pagename: '项目列表', time: '2024/01/15 21:00', operater: '朱光伟', area: '1', program: '1', pagegroup: '-' },
    { key: '3', page: '9999', pagename: '登录页', time: '2024/01/30 21:00', operater: '毛济慈', area: '2', program: '2', pagegroup: '-' },
    { key: '4', page: '2006', pagename: '看板指标', time: '2024/01/30 21:00', operater: '蒋彪', area: '1', program: '1', pagegroup: '-' },
  ]);

  // 处理搜索
  const onSearch = (value) => {
    setSearchText(value);
  };
  const filteredData = originData.filter(item =>
    Object.values(item).some(value =>
      value && String(value).toLowerCase().includes(searchText.toLowerCase()) // 先检查 value 是否存在
    )
  );

  const columns = [
    { 
      title: '页', 
      dataIndex: 'page', 
      key: 'page', 
      align: 'left', 
      width: 100,
      render: (text) => (
        <span 
          style={{ color: '#1890ff', cursor: 'pointer' }} 
          onClick={() => navigate(`/page/${text}`)}
        >
          {text}
        </span>
      )
    },
    { title: '页名', dataIndex: 'pagename', key: 'pagename', align: 'left', width: 130 },
    { title: '更新时间', dataIndex: 'time', key: 'time', align: 'left', width: 150 },
    { title: '更新者', dataIndex: 'operater', key: 'operater', align: 'left', width: 130 },
    { title: '区域', dataIndex: 'area', key: 'area', align: 'left', width: 80 },
    { title: '项', dataIndex: 'program', key: 'program', align: 'left', width: 80 },
    { title: '页组', dataIndex: 'pagegroup', key: 'pagegroup', align: 'left', width: 80 },
  ];

  return (
    <div style={{ padding: '16px' }}>
      {/* 顶部搜索栏 */}
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px',marginTop: '13px' }}>
        <div style={{ width: '10px', height: '20px', background: '#1890ff', marginRight: '10px' }} />
        <h3 style={{ margin: 0 }}>最近更新页</h3>
        <div style={{ marginLeft: 'auto' }}>
          <Search placeholder="搜索" onSearch={onSearch} style={{ width: 200 }} />
        </div>
      </div>

      {/* 数据表格 */}
      <Table
        columns={columns}
        bordered
        dataSource={filteredData}
        pagination={{
          pageSize,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          onShowSizeChange: (current, size) => setPageSize(size),
        }}
        className="custom-table"
      />
    </div>
  );
};

export default UpdateTable;
